<template>
  <div class="demo">
    <Tree :datas="trees" />
  </div>
</template>

<script>
import Tree from './TreeNode.vue';
export default {
  data () {
    return {
      trees: null
    };
  },
  components: {
    Tree
  },
  created () {
    const jsonData = [
      { id: 1, parentId: 0, name: '一级菜单A' },
      { id: 2, parentId: 0, name: '一级菜单B' },
      { id: 3, parentId: 0, name: '一级菜单C' },

      { id: 4, parentId: 1, name: '二级菜单A-A' },
      { id: 5, parentId: 1, name: '二级菜单A-B' },
      { id: 6, parentId: 2, name: '二级菜单B-A' },

      { id: 7, parentId: 4, name: '三级菜单A-A-A' },
      { id: 8, parentId: 7, name: '四级菜单A-A-A-A' },
      { id: 9, parentId: 8, name: '五级菜单A-A-A-A-A' }
    ];
    this.trees = this.formatTree(jsonData);
  },
  mounted () {
    
  },
  methods: {
    formatTree (data) {
      const copyedData = JSON.parse(JSON.stringify(data));
      return copyedData.filter(parent => {
        const findChildren = copyedData.filter((child, index) => {
          return parent.id === child.parentId;
        });
        findChildren.length ? parent.children = findChildren : parent.children = [];
        return parent.parentId === 0;
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
